<template>
	<div class="update_address">
		<div class="update_address_title">
			<van-icon name="arrow-left" size="22px" style="position: absolute;left: 5px;" @click="back" />
			<p>修改地址</p>
		</div>
		<div>

			<van-form @submit="onSubmit">
				<van-field v-model="address_info.receiver" name="receiver" label="收货人" placeholder="请填写收货人的姓名" />
				<van-field v-model="address_info.contact" name="contact" label="手机号码" placeholder="请填写收货人的手机号码" />
				<!-- 所在地区 -->

				<van-field readonly clickable name="fullLocation" :value="address_info.fullLocation" label="所在地区" placeholder="请选择省/市/区(县)"
					@click="showPicker = true" />
				<van-popup v-model="showPicker" position="bottom">
					<van-picker show-toolbar :columns="columns" @confirm="onConfirmCity" @cancel="showPicker = false" />
				</van-popup>
				
				<van-field v-model="address_info.address" name="address" label="详细地址" placeholder="街道,楼牌号等信息" />
				<van-field name="switch" label="设为默认地址">
				  <template #input>
				    <van-switch v-model="switchChecked" size="20" active-color="#5AB79C"/>
				  </template>
				</van-field>
				<div style="margin: 16px;">
					<van-button round block type="info" native-type="submit" color="#5AB79C">保存并使用</van-button>
				</div>
			</van-form>
		</div>
	</div>
</template>

<script>
	import request from '../../api/request.js'
	export default {
		name:'update_address',
		data() {
			return{
				
				index:'',
				address_info:{},
				 switchChecked: false,
				columns: [{  
						text: '浙江',
						children: [{
								text: '杭州',
								children: [{
									text: '西湖区'
								}, {
									text: '余杭区'
								}],
							},
							{
								text: '温州',
								children: [{
									text: '鹿城区'
								}, {
									text: '瓯海区'
								}],
							},
						],
					},
					{
						text: '福建',
						children: [{
								text: '福州',
								children: [{
									text: '鼓楼区'
								}, {
									text: '台江区'
								}],
							},
							{
								text: '厦门',
								children: [{
									text: '思明区'
								}, {
									text: '海沧区'
								}],
							},
						],
					},
				],
				showPicker: false,
				
			}
		},
	async	mounted() {
			
			// this.item=this.$route.query.item
			// this.index=this.$route.query.index
			// this.name=this.item.name,
			// this.phone=this.item.tel,
			// this.Cityvalue=this.item.address.split('区')[0]+'区'
			// this.full_address=this.item.address.split('区')[1]
		 //    this.switchChecked=this.item.isDefault
		    let res= await request({
				url:`/member/address/${this.$route.query.item.id}`,
				method:'get',
				headers:{
					Authorization:localStorage.getItem('token')
				}
				
			})
			this.address_info=res.result
			console.log('this.address_info',this.address_info)
		
		},
		methods:{
			back() {
				this.$router.back()
			},
			// 地区
			onConfirmCity(value) {
				this.address_info.fullLocation = value;
				this.showPicker = false;
			},
		async	onSubmit(values) {
				console.log('submit', values);
				
				
				let res= await request({
					url:`/member/address/${this.address_info.id}`,
					method:'put',
					headers:{
						Authorization:localStorage.getItem('token'),
						"Content-Type": "application/json",
						
					},
			        data:{
						
							"receiver":values.receiver,
							"contact":values.contact,
							"provinceCode": "string",
							  "cityCode": "string",
							  "countyCode": "string",
							  "isDefault": 1,
							"address":values.address
						
					}
					
					
				})
				console.log(res.result)
			},
		}
	}
</script>

<style lang="scss">
	.update_address {
		width: 100%;
		height: 100%;
		background-color: #F4F4F4;
	
		.update_address_title {
			width: 100%;
			height: 6%;
			background-color: #F8F8F8;
			display: flex;
			justify-content: center;
			align-items: center;
	
			p {
				font-size: 30px;
	
			}
		}
	}
</style>